<template>
  <div>
    <div>房子 ：{{ house }}</div>
    <div ref="r" title="666"></div>
    <TestDomRef ref="com" />
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import TestDomRef from './TestDomRef.vue'
const test = reactive({ a: 1, b: 2 })
const r = ref()
const com = ref()
onMounted(() => {
  console.log(r.value)
  console.log(com.value)
  //这里有点奇葩 还没有想明白 a是响应式对象 b不是但是取值都是基本类型
  console.log(com.value.a)
  console.log(com.value.b)
  console.log(test)
  console.log(test.a)
  console.log(test.b)
})

const house = ref(4)

defineExpose({ house })
</script>

<style lang="scss" scoped></style>
